<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="./utils/createDraw.js"></script>
    <script src="./utils/getFeatureGeom.js"></script>
    <style>
        #btn {
            position: fixed;
            z-index: 100;
            width: 200px;
            height: 50px;
            top: 10px;
            left: 50px;
        }
    </style>
</head>

<body>
    <button id="btn" onclick="activeDraw()">激活画笔</button>
    <div id="map">
    </div>
    <script>
        var docLayer = new Zondy.Map.Doc("", "myTestMap", {

        })
        var map = new ol.Map({
            target: "map",
            layers: [gaode, docLayer],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        var source = new ol.source.Vector({

        })
        var layer = new ol.layer.Vector({
            source
        })
        map.addLayer(layer)
        /* 1、获取画笔坐标 */

        function activeDraw() {
            let draw = createDraw({
                type: "Box",// 矩形
                source
            })
            map.addInteraction(draw);
            draw.on("drawend", evt => {
                source.clear()
                /* geometry */
                let geometry = evt.feature.getGeometry();
                // console.log(geometry)
                var geomObj = new Zondy.Object.Polygon();
                geomObj.setByOL(geometry);

                //1.初始化查询结构对象，设置查询结构包含几何信息
                var queryStruct = new Zondy.Service.QueryFeatureStruct();
                //是否包含几何图形信息
                queryStruct.IncludeGeometry = true;
                //是否包含属性信息
                queryStruct.IncludeAttribute = true;
                //是否包含图形显示参数
                queryStruct.IncludeWebGraphic = false;

                //2.指定查询规则
                var rule = new Zondy.Service.QueryFeatureRule({
                    //是否将要素的可见性计算在内
                    EnableDisplayCondition: false,
                    //是否完全包含
                    MustInside: false,
                    //是否仅比较要素的外包矩形
                    CompareRectOnly: false,
                    //是否相交
                    Intersect: true
                });
                //3.实例化查询参数对象
                var queryParam = new Zondy.Service.QueryParameter({
                    geometry: geomObj,
                    resultFormat: "json",
                    struct: queryStruct,
                    rule: rule
                });
                //设置查询分页号（这个值表示要查的是第几页（从0开始））// 默认是0
                queryParam.pageIndex = 0;
                //设置查询要素数目// 这个值默认是20.表示每页的最大数据数。
                queryParam.recordNumber = 1000

                //4. 实例化地图文档查询服务对象
                var queryService = new Zondy.Service.QueryDocFeature(queryParam, "myTestMap", 0, {

                });
                //执行查询操作，querySuccess为查询回调函数
                queryService.query(querySuccess);
            })
        }
        /* 2、判断图层中有几个要素,在拉框中 */

        function querySuccess(data) {
            /* mapgis对象 */
            console.log(data, 'data')
            /* ol */
            var format = new Zondy.Format.PolygonJSON();
            //将MapGIS要素JSON反序列化为new ol.Feature({})类型数组Array<new ol.Feature({})>
            var features = format.read(data);
            console.log(features, 'features')// 没查到是null。查到是[e, e, e]。
            if (features) {
                const positions = features.map(item => {
                    return getFeatureGeom(item)
                })
                console.log(positions, 'positions')
                source.addFeatures(features)
            }
        }
    </script>
</body>

</html>